<template>
  <div class="layout">
    <Layout>
      <Menu mode="horizontal" theme="light" :active-name="this.routeName" @on-select="onSelect">
        <div class="layout-nav">
          <MenuItem name="DailyCVE">
            <Icon type="android-notifications"></Icon>
            每日CVE
          </MenuItem>
          <MenuItem name="HistoryCVE">
            <Icon type="calendar"></Icon>
            历史CVE
          </MenuItem>
          <MenuItem name="Setting">
            <Icon type="android-settings"></Icon>
            个人设置
          </MenuItem>
        </div>
      </Menu>
      <Content :style="{padding: '0 50px'}">
        <Breadcrumb :style="{margin: '20px 0'}">
          <BreadcrumbItem>{{ this.routeCName[this.routeName] }}</BreadcrumbItem>
        </Breadcrumb>
        <Card :style="{'min-height': '600px'}">
          <div v-if="this.routeName === 'DailyCVE'">
             <DailyCVE></DailyCVE>
          </div>
          <div v-else-if="this.routeName === 'HistoryCVE'">
             <HistoryCVE></HistoryCVE>
          </div>
          <div v-else-if="this.routeName === 'Setting'">
             <Setting></Setting>
          </div>
          <div v-else>404</div>
        </Card>
      </Content>
      <Footer class="layout-footer-center">2018 &copy; company</Footer>
    </Layout>
  </div>
</template>

<script>
import DailyCVE from './DailyCVE'
import HistoryCVE from './HistoryCVE'
import Setting from './Setting'

export default {
  name: 'LayoutCVE',
  components: {
    DailyCVE,
    HistoryCVE,
    Setting
  },
  data () {
    return {
      routeName: '',
      routeCName: {
        DailyCVE: '每日CVE',
        HistoryCVE: '历史CVE',
        Setting: '个人设置'
      }
    }
  },
  mounted () {
    this.routeName = this.$route.name
    console.log(this.routeName)
  },
  methods: {
    onSelect (state) {
      this.$router.push(state)
      this.routeName = state
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.layout{
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-nav{
  width: 360px;
  margin: 0 auto;
  margin-right: 0;
}
.ivu-menu-item {
  color: rgba(255,255,255,.5);
}
.layout-footer-center{
  text-align: center;
}
</style>
